<!--
 * @Description: 小程序自定义tabbar
 * @Author: Zhanghan
 * @Date: 2024-03-07 14:10:38
 * @LastEditTime: 2024-03-07 15:19:07
 * @LastEditors: Zhanghan
-->
<template>
  <cover-view class="tab-bar">
    <cover-view class="tab-bar-border"></cover-view>
    <cover-view
      v-for="(item, index) in list"
      :key="index"
      class="tab-bar-item"
      @tap="switchTab(index, item.pagePath)"
    >
      <cover-image
        :src="selected === index ? item.selectedIconPath : item.iconPath"
      />
      <cover-view
        :style="{ color: selected === index ? selectedColor : color }"
        >{{ item.text }}</cover-view
      >
    </cover-view>
  </cover-view>
</template>

<script setup>
import { computed } from "vue";
import Taro from "@tarojs/taro";
import { usePageStore } from "@/store/modules/page";
const store = usePageStore();

const color = "#000000";
const selectedColor = "#44CBB4";

const selected = computed(() => store.selected);

const list = [
  {
    pagePath: "/pages/home/index",
    text: "首页",
    iconPath: "../assests/my_tabBar/home.png",
    selectedIconPath: "../assests/my_tabBar/home_active.png",
  },
  {
    pagePath: "/pages/menu/index",
    text: "分类",
    iconPath: "../assests/my_tabBar/menu.png",
    selectedIconPath: "../assests/my_tabBar/menu_active.png",
  },
  {
    pagePath: "/pages/shopcar/index",
    text: "购物车",
    iconPath: "../assests/my_tabBar/shop.png",
    selectedIconPath: "../assests/my_tabBar/shop_active.png",
  },
  {
    pagePath: "/pages/mine/index",
    text: "个人中心",
    iconPath: "../assests/my_tabBar/mine.png",
    selectedIconPath: "../assests/my_tabBar/mine_active.png",
  },
];

function switchTab(index, url) {
  setSelected(index);
  Taro.switchTab({ url });
}

function setSelected(index) {
  // store.dispatch('setSelected', index)
  store.changeTabbar(index);
}
</script>

<style lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 54px;
  height: 54px;
}

.tab-bar-item cover-view {
  font-size: 20px;
}
</style>
